<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <pre class="layui-code" id="demoCode">
        <h3>html</h3>
        //代码区域
        var a = 'hello layui';
        </pre
      >
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use("code", function () {
        //加载code模块 不传参数则全部美化
        layui.code({
          elem: "#demoCode", // 传DOM选择器 //默认值为.layui-code
          title: "标题",
          height: "150px", // 最大高度 px
          encode: true, // 是否转义html标签，默认false 设置为true就会在代码中看见标签名了
          // about: false, // 是否剔除右上关于
          // skin: "notepad", // 风格
        });

        // 除了上述方式的设置，我们还允许你直接在pre标签上设置属性来替代，如：
        // <pre class="layui-code" lay-title="" lay-height="" lay-skin="" lay-encode=""></pre>;
      });
    </script>
  </body>
</html>
